<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="modal fade" id="qReserv2" tabindex="-1" role="dialog"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" id="cancel2">×</button>
				<h3 class="modal-title">빠른예약</h3>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-8">
						<div id="step1" class="innerDiv">
							<div>
								<ol class="breadcrumb">
									<li class="active">동의절차</li>
									<li><a href="#">날짜/회차선택</a></li>
									<li><a href="#">인원/수량입력</a></li>
								</ol>
							</div>
							<textarea class="agreetext form-control" rows="8"
								readonly="readonly">
가. 개인정보의 수집·이용 목적
"서울시 공공서비스통합예약 홈페이지" 서비스는 개인정보보호법 제15조에 따라 다음의 목적을 위해 개인정보를 수집 및 이용을 알리고 동의를 받습니다.

○ 예약신청서에 입력하시는 정보는 예약 접수 처리와 예약정보 안내를 위한 목적으로 수집 및 이용됩니다.
○ 또한 서비스 통계 및 만족도 조사 등의 정책 활용 등을 목적으로 개인정보를 이용할 수 있습니다.

나. 수집하는 개인정보의 항목
○ 필수항목 : 개인명, 연락처
○ 필수 또는 선택항목 : 이메일, 주소, 이외의 개인정보(각 구청 및 기관 추가 수집 정보)
○ 유료 서비스 이용 과정에서 아래와 같은 결제 정보들이 수집될 수 있습니다.
 - 계좌이체시 : 은행명, 계좌번호 등

다. 개인정보의 보유 및 이용기간
○ 보유목적 : 예약정보 및 결제내역 확인
○ 보유기간 : 3년

라. 동의를 거부할 권리가 있다는 사실과 동의 거부에 따른 불이익 내용
○ 공공서비스통합예약 홈페이지에서 수집하는 개인정보에 대해 동의를 거부할 권리가 있으며, 동의 거부 시에는 예약 서비스 이용이 제한됩니다. 							
							</textarea>
							<div class="checkbox">
								<label> <input type="checkbox" id="agreeChk" /> 이용약관에
									동의합니다.
								</label>
							</div>
						</div>
						<div id="step2" class="innerDiv hide">
							<div>
								<ol class="breadcrumb">
									<li><a href="#">동의절차</a></li>
									<li class="active">날짜/회차선택</li>
									<li><a href="#">인원/수량입력</a></li>
								</ol>
							</div>
							<div class="row">
								<div class="col-xs-9">
									<div id="qr2Cal"></div>
								</div>
								<div class="col-xs-3">
									<div>
									<label for="times">회차선택</label>
									<button id="reset" type="button" class="btn btn-default btn-xs">초기화</button>
									</div> 
									<select id="times">
										<option value='0'>-- 회차선택 --</option>
									</select>
								</div>
							</div>
						</div>
						<div id="step3" class="innerDiv hide">
							<div>
								<ol class="breadcrumb">
									<li><a href="#">동의절차</a></li>
									<li><a href="#">날짜/회차선택</a></li>
									<li class="active">인원/수량입력</li>
								</ol>
							</div>
							<div>
								<table class="table">
									<tr>
										<th>
											<label>기본 시간</label>
										</th>
										<th>
											<label>이용료</label>
										</th>
										<th>
											<label>신청인원</label>
										</th>
									</tr>
									<tr>
										<td>
											<p>2시간</p>
										</td>
										<td>
											<p id="f"></p>
										</td>
										<td>
											<input type="text" id="inputppl" />
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="alert alert-info">서비스 예약 정보</div>
						<table class="table table-bordered">
							<tr>
								<td><label>서비스명</label></td>
								<td><div class="overflow">
										<span id="title2"></span>
									</div></td>
							</tr>
							<tr>
								<td><label>일자</label></td>
								<td><div class="overflow">
										<span id="rDate2"></span>
									</div></td>
							</tr>
							<tr>
								<td><label>문의전화</label></td>
								<td><div class="overflow">
										<span id="phone2"></span>
									</div></td>
							</tr>
						</table>
						<div class="alert alert-info">나의 예약 정보</div>
						<table class="table table-bordered">
							<tr>
								<td><label>일자</label></td>
								<td><div class="overflow">
										<span id="selDate"></span>
									</div></td>
							</tr>
							<tr>
								<td><label>회차</label></td>
								<td><div class="overflow">
										<span id="parttime"></span>
									</div></td>
							</tr>
							<tr>
								<td><label>인원/수량</label></td>
								<td><div class="overflow">
										<span id="pa"></span>
									</div></td>
							</tr>
							<tr>
								<td><label>이용료</label></td>
								<td><div class="overflow">
										<span id=payfee></span>
									</div></td>
							</tr>
							<tr>
								<td><label>취소기간</label></td>
								<td><div class="overflow">
										<span id="cDate"></span>
									</div></td>
							</tr>
						</table>
						<input type="hidden" id="pt" value="" />
						<input type="hidden" id="ppl" value="" />
						<input type="hidden" id="fee" value="" />
						<input type="hidden" id="rvDate" value="" />
						<div>
							<button class="btn btn-default" id="prevStep">이전단계</button>
							<button class="btn btn-primary" id="nextStep">다음단계</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	$("#qReserv2").on(
			"show.bs.modal",
			function() {
				var step = $("#step").val();
				var sno = $("#sno").val();

				$.ajax({
					url : "/Reservation/reserv/qreserv.res",
					data : {
						step : step,
						sno : sno
					},
					dataType : "json",
					success : function(list) {
						var title = decodeURI(list.title).replace(/\+/g, " ");
						var phone = list.phone;
						var rsDate = new Date(list.rsDate);
						var reDate = new Date(list.reDate);

						var rDate = rsDate.getFullYear() + "-"
								+ (rsDate.getMonth() + 1) + "-"
								+ rsDate.getDate() + " ~ "
								+ reDate.getFullYear() + "-"
								+ (reDate.getMonth() + 1) + "-"
								+ reDate.getDate();
						$("#title2").html(title);
						$("#rDate2").html(rDate);
						$("#phone2").html(phone);
						$("#cDate").html(list.rcDate + "일 전까지");
					}
				});
				$("#step").val(0);
			});
	$("#qReserv2").on("hide.bs.modal", function() {
		removeAll();

		$("#agreeChk").attr("checked", false);

		$("#step1").removeClass("hide");
		$("#step2").removeClass("hide");
		$("#step3").removeClass("hide");
		$("#step2").addClass("hide");
		$("#step3").addClass("hide");
		
		$("#pt").val("");
		$("#ppl").val("");
		$("#fee").val("");
		$("#rvDate").val("");
		$("#inputppl").val("");
		$("#f").html("");
		
		$("#agreeChk").removeAttr("checked");
		
		resetSelect();
		
		$("#pa").html("");
		$("#payfee").html("");
	});

	$("#nextStep").click(function() {
		var step = $("#step").val();

		if (step == 0) {
			var chk = $("#agreeChk").is(":checked");
			if (!chk) {
				alert("동의되지않았습니다.");
				return;
			} else {
				$("#step1").addClass("hide");

				$("#step2").removeClass("hide");

				$("#agreeChk").removeAttr("checked");
				setProperty($("#sno").val(), "qr2Cal");
				process2();
			}
		} else if (step == 1) {
			if($("#rvDate").val().length == 0) {
				alert("예약일자가 선택되지않았습니다.");
				return;
			} else if(($("#pt").val().length == 0) && ($("#pt").val() == 0)) {
				alert("회차가 선택되지않았습니다.");
				return;
			}
			$("#f").html(obj.fee + "원");
			$("#step2").addClass("hide");
			$("#step3").removeClass("hide");
		} else if (step == 2) {
			if (confirm("예약하시겠습니까?")) {
				//sno, uid, pt, ppl fee rvDate
				var rvDate = $("#rvDate").val();
				var sno = obj.sno;
				var uid = "${ member.uid }";
				var pt = $("#pt").val();
				var ppl = $("#ppl").val();
				var fee = $("#fee").val();
				
				$.ajax({
					url: "/Reservation/reserv/makeReserv.res",
					data: {
						sno: sno,
						uid: uid,
						pt: pt,
						ppl: ppl,
						fee: fee,
						rvDate: rvDate
					},
					success: function() {
						alert("성공적으로 예약되었습니다.\n\n 예약 정보는 마이페이지에서 다시 보실 수 있으십니다.");
						location.reload();
					},
					error: function() {
						alert("예약중 오류가 발생했습니다.\n\n 처음으로 돌아갑니다.");
						location.reload();
					}
				});
			}
		}
		$("#step").val(++step);
	});
	$("#prevStep").click(function() {
		var step = $("#step").val();
		if (step == 0) {
			if (confirm("진행을 중단하시겠습니까?"))
				$("#qReserv2").modal("hide");
		} else if (step == 1) {
			$("#step").val(0);
			$("#agreeChk").attr("checked", false);
			$("#step2").addClass("hide");
			$("#step1").removeClass("hide");
		} else if (step == 2) {
			$("#pa").html("");
			$("#payfee").html("");
			$("#inputppl").html("");
			$("#f").html("");
			
			$("#step").val(1);
			$("#step3").addClass("hide");

			$("#step2").removeClass("hide");

			setProperty($("#sno").val(), "qr2Cal");
			process2();
		}
	});
	$("#cancel2").click(function() {
		if (confirm("진행을 중단하시겠습니까?"))
			$("#qReserv2").modal("hide");
	});

	$("#qr2Cal").on("click", ".day", function() {
		//$(".day").css("border", "none");
		//$(this).css("border", "1px solid F5F5F5");
		var str = $(this).attr("class");
		var td = str.substring(7, str.length);

		var selectDate = new Date(year, month - 1, td);
		var startDate = new Date(obj.rsDate);
		var endDate = new Date(obj.reDate);

		if (!(startDate <= selectDate && selectDate <= endDate)) {
			alert("이용일자 내 범위 일이 아닙니다.");
			return;
		} else {
			$.ajax({
				url : "/Reservation/reserv/CheckReserv.res",
				data : {
					sno : serviceNo,
					year : selectDate.getFullYear(),
					month : selectDate.getMonth() + 1,
					date : selectDate.getDate()
				},
				dataType : "json",
				success : function(list) {
					$("#times").empty();
					
					var maxrv = obj.maxrv;
						
					var st = 6;
					var et = 8;
					
					$("#times").append("<option value='0'>-- 회차선택 --</option>");
					for(var i = 1; i <= maxrv; i++) {
						var isDup = false;
						for(var j in list) {
							if(list[j] == i)
								isDup = true;
						}
						if(!isDup)
							$("#times").append("<option value='" + i + "'>" 
									+ i  + "회차(" + st + ":00 ~ " + et + ":00)</option>");
						st += 2;
						et += 2;
					}
					$("#selDate").html(selectDate.getFullYear() + "-" 
							+ (selectDate.getMonth() + 1) + "-" + selectDate.getDate());
					$("#rvDate").val(selectDate.getFullYear() + "-" 
							+ (selectDate.getMonth() + 1) + "-" + selectDate.getDate());
				}
			});
		}
	});
	//$("#addrSelect option:selected").val()
	$("#times").change(function() {
		var selVal = $("#times option:selected").val();
		var selText = $("#times option:selected").text();
		
		$("#parttime").html(selText);
		if(selVal != null)
			$("#pt").val(selVal);
	});
	$("#inputppl").on("keyup", function() {
		var p = $(this).val();
		var f = obj.fee + "원";
		if($.isNumeric(p)) {
			$("#pa").html(p + "명");
			$("#ppl").val(p);
			
			$("#payfee").html(f);
			$("#fee").val(obj.fee);
		} else {
			alert("인원은 숫자만 입력하실 수 있습니다.");
			$("#inputppl").val("");
			$("#pa").html("");
		}
	});
	
	$("#reset").click(function() {
		resetSelect();
	});
	function resetSelect() {
		$("#selDate").html("");
		$("#parttime").html("");
		
		$("#rvDate").val("");
		$("#pt").val("");
		
		$("#times").empty();
		$("#times").append("<option value='0'>-- 회차선택 --</option>");
	}
	
	
</script>